<template>
  <div class='experience'>
    <div class="experTop">
        <img src="@/assets/img/huawei.webp" alt="">
        <div class="experForm animate__animated wowExper animate__fadeInLeft">
            <p>华为全屋智能</p>
            <p>预约到店体验</p>
            <el-form :model="ruleForm" label-position='left' :rules="rules" ref="ruleForm" label-width="60px" class="demo-ruleForm">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="ruleForm.name" clearable></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="phone">
                <el-input v-model.number="ruleForm.phone" clearable></el-input>
              </el-form-item>
              <el-form-item label="门店" prop="stores">
                 <el-select ref="select" v-model="ruleForm.stores" placeholder="请选择门店" clearable>
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-button type="primary" class="sub" @click="submitForm('ruleForm')">立即预约</el-button>
            </el-form>
        </div>
    </div>
    <title-bar class="animate__animated wowlive animate__fadeInDown" :title="'EXPERIENCE'" :eTitle="'EXPERIENCE丨预约体验'"></title-bar>
    <div class="smart">
          <div class="saLeft animate__animated wowExper animate__fadeInLeft">
            <img src="https://s1.ax1x.com/2022/07/25/jv1vXd.jpg" alt="">
            <h3>体验馆1</h3>
          </div>
          <div class="saRight animate__animated wowExper animate__fadeInRight">
            <img src="https://s1.ax1x.com/2022/07/25/jv1vXd.jpg" alt="">
            <h3>体验馆2</h3>
          </div>
        </div>
    <Btmx></Btmx>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
  },
  data () {
    //姓名效验
      var validateName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入姓名'));
        } else {
          callback();
        }
      };
      //手机号效验
      var validatePhone = (rule, value, callback) => {
        let phoneExp = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        if (value === '') {
          callback(new Error('请输入手机号'));
        } else if (!phoneExp.test(value)) {
          callback(new Error('请输入正确手机号！'));
        } else {
          callback();
        }
      };
      var validateStores = (rule,value,callback) =>{
        if(value === ''){
          callback(new Error('请选择门店'));
        }else{
          callback();
        }
      }
    return {
      options: [{
          value: '1',
          label: '华为全屋智能授权体验店(步步高梅溪新天地店)'
        }, {
          value: '2',
          label: '华为授权服务中心(长沙印象汇店)'
        }, {
          value: '3',
          label: '华为智能生活馆(长沙德思勤广场)'
        }],
       ruleForm: {
          name: '',
          phone: '',
          stores: ''
        },
        rules: {
          name: [
            { validator: validateName, trigger: 'blur' }
          ],
          phone: [
            { validator: validatePhone, trigger: 'blur' }
          ],
          stores:[
            {validator: validateStores, trigger: 'change'}
          ]
        }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    submitForm(formName) {
      let that = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.ruleForm)
            
            this.$message({
                showClose: true,
                message: '恭喜你，完成预约',
                type: 'success',
                offset:75,
                onClose (){
                  for (const key in that.ruleForm) {
                    that.ruleForm[key] = ''
                  }
                  that.$refs[formName].resetFields();
                }
            });
          } else {
            this.$message({
              showClose: true,
              message: '请完善预约信息',
              type: 'warning',
              offset:75
            });
            return false;
          }
        });
      },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.$nextTick(() => {
        new this.$wow({ boxClass: "wowExper" }).init();
    });
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
      window.scrollTo(0,0)
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类
.smart{
  display: flex;
  padding: 0 4% 20px 4%;
  div{
    position: relative;
    h3{
      cursor: pointer;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  }
  .saLeft{
    width: 48%;
    margin-right: 2%;
  }
  .saRight{
    width: 48%;
    margin-left: 2%;
  }
  img{
    cursor: pointer;
    width: 100%;
  }
}
.sub{
  width:100%;
  background-color: #000;
  border-color:#000;
  border-radius: 25px;
  margin-top: 30px;
}
.el-select{
  width: 100%;
}
.el-form{
  margin-top: 50px;
}
.el-form ::v-deep .el-input__inner{
    height: 30px ;
    border: none ;
    border-bottom: 1px solid #000;
    border-radius: revert;
    padding: 0 25px 0 5px;
    background: rgba(255,255,255,-1);
} 
.experTop{
    padding-top: 70px;
    margin-bottom: 20px;
    position: relative;
    img{
        width: 100%;
        height: 100%;
    }
    .experForm{
        margin-top: 70px;
        position: absolute;
        background: rgba(255,255,255,.95);
        height: 80%;
        width: 30%;
        padding: 3.6458vw 4.1667vw;
        top: 0;
        left: 8.3333vw;
        p{
            font-size: 2.0833vw;
        }
    }
}
</style>
